
<template>
  <div class="about">
    <n-layout-content content-style="padding: 24px;">
      <n-card title="关于项目">
        <n-descriptions label-placement="left" bordered :column="1">
          <n-descriptions-item label="项目名称">
            PVAX python + vue + pywebview 跨平台桌面 项目模板
          </n-descriptions-item>
          <n-descriptions-item label="技术栈">
            Vue 3 + TypeScript + Vite + python + pywebview
          </n-descriptions-item>
          <n-descriptions-item label="UI框架">
            Naive UI
          </n-descriptions-item>
          <n-descriptions-item label="跨平台框架">
            Pywebview6.0
          </n-descriptions-item>
          <n-descriptions-item label="路由">
            Vue Router
          </n-descriptions-item>
          <n-descriptions-item label="状态管理">
            Pinia (可选)
          </n-descriptions-item>
          <n-descriptions-item label="打包">
            Pyinstaller6.16.0
          </n-descriptions-item>
        </n-descriptions>
        <n-divider />
        <h3>接口请求</h3>
        <n-button strong secondary type="success" @click="handleValidateClick" class="login-btn">
          api请求
        </n-button>
        <div>
          {{ result }}
        </div>
      </n-card>
    </n-layout-content>
  </div>
</template>
<script setup lang="ts">
defineOptions({
  name: "about-content"
});
import { ref } from 'vue'
import {  useMessage } from 'naive-ui'
import { api } from '../services/api'

const message = useMessage()
const result = ref("待执行")

const handleValidateClick = async () => {
  try {
    const res = await api.getDataList()
    result.value = res.data
    
    message.success('请求成功')
  } catch (error) {
    message.error('请求失败')
  }
}
</script>

<style scoped>
.about {
  padding: 20px;
  box-sizing: border-box;
}
.login-btn{
  margin:20px 0;
}
</style>